<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <div th:replace="m/head :: head"></div>

    <title>我的订单</title>
</head>

<body class="body-gray">

<!--公用头部-->
<div th:replace="m/head :: body('banner.hidden', 'head-to-personal', '我的订单')"></div>

<div class="headwrap">
    <div class="head-nav order-head-nav">
        <ul>
            <li th:class="${status eq 0 ? 'on' : ''}">
                <a th:href="@{/order/list/0}">
                    全部订单
                    <em></em>
                </a>
            </li>
            <li th:class="${(status eq 1 and statusStep eq 1) ? 'on' : ''}">
                <a th:href="@{'/order/list/1?statusStep=1'}">
                    已完成
                    <em></em>
                </a>
            </li>
            <li th:class="${status eq 2 ? 'on' : ''}">
                <a th:href="@{/order/list/2}">
                    待付款
                    <em></em>
                </a>
            </li>
            <li th:class="${(status eq 1 and statusStep eq 0) ? 'on' : ''}">
                <a th:href="@{'/order/list/1?statusStep=0'}">
                    待评价
                    <em></em>
                </a>
            </li>
        </ul>
    </div>
</div>


<!--主体内容-->
<div class="myOrder-content">

    <div id="blank-box" th:style="${page.total eq 0 ? 'text-align: center; padding: 20px;' : 'text-align: center; padding: 20px; display: none;'}">
        暂时没有订单, 快去选购喜爱的短视频吧!
        <div class="foot-box"></div>
        <div class="foot-box"></div>
    </div>

    <!-- 全部 -->
    <div class="myOrder-con">
        <div class="myOrder-box" th:each="item:${page.list}">
            <div class="top clearfix">
                <div class="left">
                    <p>订单编号：[[${item.no}]]</p>
                </div>
                <div class="right">
                    <p th:text="${#dates.format(item.orderTime, 'yyyy-MM-dd HH:mm:ss')}"></p>
                </div>
            </div>

            <!-- 同款 -->
            <div class="middle clearfix" th:if="${item.type eq 1}">
                <div class="middle-con clearfix">
                    <div class="left">
                        <img th:src="${#request.getAttribute('uploadServer') + item.orderDetail.sameStyle.spriteUrl}"/>
                    </div>
                    <div class="right">
                        <h4>作品：[[${item.orderDetail.sameStyle.name}]]</h4>
                        <p>简介：[[${item.orderDetail.sameStyle.description}]]</p>
                    </div>
                </div>
                <div class="down clearfix">
                    <p cus:dict="order-status,${item.status}"></p>
                    <p>合计：<span th:text="${'￥' + #numbers.formatDecimal(item.totalPrice,1,2)}"></span>元</p>
                </div>
            </div>

            <!-- 私人订制 -->
            <div class="middle clearfix" th:if="${item.type eq 2}">
                <div class="middle-con clearfix">
                    <div class="left">
                        <img th:if="${item.orderDetail.photoGrapherUser.portrait ne null}" th:src="${#request.getAttribute('uploadServer') + item.orderDetail.photoGrapherUser.portrait}">
                        <img th:if="${item.orderDetail.photoGrapherUser.portrait eq null and item.orderDetail.photoGrapherUser.gender eq 0}" th:src="${#request.getAttribute('ctx') + '/static/front/img/gender/portrait-female.jpg'}"/>
                        <img th:if="${item.orderDetail.photoGrapherUser.portrait eq null and item.orderDetail.photoGrapherUser.gender eq 1}" th:src="${#request.getAttribute('ctx') + '/static/front/img/gender/portrait-male.jpg'}"/>
                    </div>
                    <div class="right">
                        <h4>导演：[[${item.orderDetail.photoGrapherUser.name ne null ?
                            item.orderDetail.photoGrapherUser.name :
                            item.orderDetail.photoGrapherUser.nickname}]]</h4>
                        <p>简介：[[${item.orderDetail.photoGrapherUser.description}]]</p>
                    </div>
                </div>
                <div class="middle-con clearfix">
                    <div class="left">
                        <img th:if="${item.orderDetail.scriptWriterUser.portrait ne null}" th:src="${#request.getAttribute('uploadServer') + item.orderDetail.scriptWriterUser.portrait}">
                        <img th:if="${item.orderDetail.scriptWriterUser.portrait eq null and item.orderDetail.scriptWriterUser.gender eq 0}" th:src="${#request.getAttribute('ctx') + '/static/front/img/gender/portrait-female.jpg'}"/>
                        <img th:if="${item.orderDetail.scriptWriterUser.portrait eq null and item.orderDetail.scriptWriterUser.gender eq 1}" th:src="${#request.getAttribute('ctx') + '/static/front/img/gender/portrait-male.jpg'}"/>
                    </div>
                    <div class="right">
                        <h4>编剧：[[${item.orderDetail.scriptWriterUser.name ne null ?
                            item.orderDetail.scriptWriterUser.name :
                            item.orderDetail.scriptWriterUser.nickname}]]</h4>
                        <p>简介：[[${item.orderDetail.scriptWriterUser.description}]]</p>
                    </div>
                </div>
                <div class="down clearfix">
                    <p cus:dict="order-status,${item.status}"></p>
                    <p>合计：<span th:text="${'￥' + #numbers.formatDecimal(item.totalPrice,1,2)}"></span>元</p>
                </div>
            </div>

            <!-- 待付款 -->
            <div class="bottom" th:if="${item.status eq 2}">
                <a th:if="${item.status eq 2}" th:href="@{'/order/pay-ready/' + ${item.id}}" target="_blank">去支付</a>
            </div>

            <!-- 已完成, 已评价 -->
            <div class="bottom" th:if="${item.status eq 1 and item.statusStep eq 1}">
                <a href="javascript:;" class="del-btn" th:attr="data-item-id=${item.id}">删除</a>
                <!--<a href="javascript:void(0)">再次购买</a>-->
                <a class="on" th:if="${status eq 2}" th:href="@{'/evaluate/detail/' + ${item.id}}" target="_blank">查看评价</a>
            </div>

            <!-- 待评价 -->
            <div class="bottom" th:if="${item.status eq 1 and item.statusStep eq 0}">
                <a href="javascript:;" class="del-btn" th:attr="data-item-id=${item.id}">删除</a>
                <!--<a href="javascript:void(0)">再次购买</a>-->
                <a th:href="@{'/evaluate/ready?targetType=3&target=' + ${item.id}}" class="on">评价</a>
            </div>

            <!-- 已取消 -->
            <div class="bottom" th:if="${item.status eq 3}">
                <!--<a href="javascript:void(0)">再次购买</a>-->
            </div>

        </div>

    </div>

    <!--/* tab 已完成 */-->
    <div class="myOrder-con">
        <div class="myOrder-box" th:each="item:${page.list}">
            <div class="top clearfix">
                <div class="left">
                    <p>订单编号：[[${item.no}]]</p>
                </div>
                <div class="right">
                    <p th:text="${#dates.format(item.orderTime, 'yyyy-MM-dd HH:mm:ss')}"></p>
                </div>
            </div>

            <!-- 同款 -->
            <div class="middle clearfix" th:if="${item.type eq 1}">
                <div class="middle-con clearfix">
                    <div class="left">
                        <img th:src="${#request.getAttribute('uploadServer') + item.orderDetail.sameStyle.spriteUrl}"/>
                    </div>
                    <div class="right">
                        <h4>作品：[[${item.orderDetail.sameStyle.name}]]</h4>
                        <p>简介：[[${item.orderDetail.sameStyle.description}]]</p>
                    </div>
                </div>
                <div class="down clearfix">
                    <p cus:dict="order-status,${item.status}"></p>
                    <p>合计：<span th:text="${'￥' + #numbers.formatDecimal(item.totalPrice,1,2)}"></span>元</p>
                </div>
            </div>

            <!-- 私人订制 -->
            <div class="middle clearfix" th:if="${item.type eq 2}">
                <div class="middle-con clearfix">
                    <div class="left">
                        <img th:if="${item.orderDetail.photoGrapherUser.portrait ne null}" th:src="${#request.getAttribute('uploadServer') + item.orderDetail.photoGrapherUser.portrait}">
                        <img th:if="${item.orderDetail.photoGrapherUser.portrait eq null and item.orderDetail.photoGrapherUser.gender eq 0}" th:src="${#request.getAttribute('ctx') + '/static/front/img/gender/portrait-female.jpg'}"/>
                        <img th:if="${item.orderDetail.photoGrapherUser.portrait eq null and item.orderDetail.photoGrapherUser.gender eq 1}" th:src="${#request.getAttribute('ctx') + '/static/front/img/gender/portrait-male.jpg'}"/>
                    </div>
                    <div class="right">
                        <h4>导演：[[${item.orderDetail.photoGrapherUser.name ne null ?
                            item.orderDetail.photoGrapherUser.name :
                            item.orderDetail.photoGrapherUser.nickname}]]</h4>
                        <p>简介：[[${item.orderDetail.photoGrapherUser.description}]]</p>
                    </div>
                </div>
                <div class="middle-con clearfix">
                    <div class="left">
                        <img th:if="${item.orderDetail.scriptWriterUser.portrait ne null}" th:src="${#request.getAttribute('uploadServer') + item.orderDetail.scriptWriterUser.portrait}">
                        <img th:if="${item.orderDetail.scriptWriterUser.portrait eq null and item.orderDetail.scriptWriterUser.gender eq 0}" th:src="${#request.getAttribute('ctx') + '/static/front/img/gender/portrait-female.jpg'}"/>
                        <img th:if="${item.orderDetail.scriptWriterUser.portrait eq null and item.orderDetail.scriptWriterUser.gender eq 1}" th:src="${#request.getAttribute('ctx') + '/static/front/img/gender/portrait-male.jpg'}"/>
                    </div>
                    <div class="right">
                        <h4>编剧：[[${item.orderDetail.scriptWriterUser.name ne null ?
                            item.orderDetail.scriptWriterUser.name :
                            item.orderDetail.scriptWriterUser.nickname}]]</h4>
                        <p>简介：[[${item.orderDetail.scriptWriterUser.description}]]</p>
                    </div>
                </div>
                <div class="down clearfix">
                    <p cus:dict="order-status,${item.status}"></p>
                    <p>合计：<span th:text="${'￥' + #numbers.formatDecimal(item.totalPrice,1,2)}"></span>元</p>
                </div>
            </div>

            <div class="bottom">
                <a href="javascript:;" class="del-btn" th:attr="data-item-id=${item.id}">删除</a>
                <!--<a href="javascript:void(0)">再次购买</a>-->
                <a class="on" th:if="${status eq 2}" th:href="@{'/evaluate/detail/' + ${item.id}}" target="_blank">查看评价</a>
            </div>
        </div>
    </div>

    <!--/* tab 待付款 */-->
    <div class="myOrder-con">
        <div class="myOrder-box" th:each="item:${page.list}">
            <div class="top clearfix">
                <div class="left">
                    <p>订单编号：[[${item.no}]]</p>
                </div>
                <div class="right">
                    <p th:text="${#dates.format(item.orderTime, 'yyyy-MM-dd HH:mm:ss')}"></p>
                </div>
            </div>

            <!-- 同款 -->
            <div class="middle clearfix" th:if="${item.type eq 1}">
                <div class="middle-con clearfix">
                    <div class="left">
                        <img th:src="${#request.getAttribute('uploadServer') + item.orderDetail.sameStyle.spriteUrl}"/>
                    </div>
                    <div class="right">
                        <h4>作品：[[${item.orderDetail.sameStyle.name}]]</h4>
                        <p>简介：[[${item.orderDetail.sameStyle.description}]]</p>
                    </div>
                </div>
                <div class="down clearfix">
                    <p cus:dict="order-status,${item.status}"></p>
                    <p>合计：<span th:text="${'￥' + #numbers.formatDecimal(item.totalPrice,1,2)}"></span>元</p>
                </div>
            </div>

            <!-- 私人订制 -->
            <div class="middle clearfix" th:if="${item.type eq 2}">
                <div class="middle-con clearfix">
                    <div class="left">
                        <img th:if="${item.orderDetail.photoGrapherUser.portrait ne null}" th:src="${#request.getAttribute('uploadServer') + item.orderDetail.photoGrapherUser.portrait}">
                        <img th:if="${item.orderDetail.photoGrapherUser.portrait eq null and item.orderDetail.photoGrapherUser.gender eq 0}" th:src="${#request.getAttribute('ctx') + '/static/front/img/gender/portrait-female.jpg'}"/>
                        <img th:if="${item.orderDetail.photoGrapherUser.portrait eq null and item.orderDetail.photoGrapherUser.gender eq 1}" th:src="${#request.getAttribute('ctx') + '/static/front/img/gender/portrait-male.jpg'}"/>
                    </div>
                    <div class="right">
                        <h4>导演：[[${item.orderDetail.photoGrapherUser.name ne null ?
                            item.orderDetail.photoGrapherUser.name :
                            item.orderDetail.photoGrapherUser.nickname}]]</h4>
                        <p>简介：[[${item.orderDetail.photoGrapherUser.description}]]</p>
                    </div>
                </div>
                <div class="middle-con clearfix">
                    <div class="left">
                        <img th:if="${item.orderDetail.scriptWriterUser.portrait ne null}" th:src="${#request.getAttribute('uploadServer') + item.orderDetail.scriptWriterUser.portrait}">
                        <img th:if="${item.orderDetail.scriptWriterUser.portrait eq null and item.orderDetail.scriptWriterUser.gender eq 0}" th:src="${#request.getAttribute('ctx') + '/static/front/img/gender/portrait-female.jpg'}"/>
                        <img th:if="${item.orderDetail.scriptWriterUser.portrait eq null and item.orderDetail.scriptWriterUser.gender eq 1}" th:src="${#request.getAttribute('ctx') + '/static/front/img/gender/portrait-male.jpg'}"/>
                    </div>
                    <div class="right">
                        <h4>编剧：[[${item.orderDetail.scriptWriterUser.name ne null ?
                            item.orderDetail.scriptWriterUser.name :
                            item.orderDetail.scriptWriterUser.nickname}]]</h4>
                        <p>简介：[[${item.orderDetail.scriptWriterUser.description}]]</p>
                    </div>
                </div>
                <div class="down clearfix">
                    <p cus:dict="order-status,${item.status}"></p>
                    <p>合计：<span th:text="${'￥' + #numbers.formatDecimal(item.totalPrice,1,2)}"></span>元</p>
                </div>
            </div>
            <div class="bottom">
                <a th:if="${item.status eq 2}" th:href="@{'/order/pay-ready/' + ${item.id}}" target="_blank">去支付</a>
            </div>
        </div>
    </div>

    <!--/* tab 待评价 */-->
    <div class="myOrder-con">
        <div class="myOrder-box" th:each="item:${page.list}">
            <div class="top clearfix">
                <div class="left">
                    <p>订单编号：[[${item.no}]]</p>
                </div>
                <div class="right">
                    <p th:text="${#dates.format(item.orderTime, 'yyyy-MM-dd HH:mm:ss')}"></p>
                </div>
            </div>

            <!-- 同款 -->
            <div class="middle clearfix" th:if="${item.type eq 1}">
                <div class="middle-con clearfix">
                    <div class="left">
                        <img th:src="${#request.getAttribute('uploadServer') + item.orderDetail.sameStyle.spriteUrl}"/>
                    </div>
                    <div class="right">
                        <h4>作品：[[${item.orderDetail.sameStyle.name}]]</h4>
                        <p>简介：[[${item.orderDetail.sameStyle.description}]]</p>
                    </div>
                </div>
                <div class="down clearfix">
                    <p cus:dict="order-status,${item.status}"></p>
                    <p>合计：<span th:text="${'￥' + #numbers.formatDecimal(item.totalPrice,1,2)}"></span>元</p>
                </div>
            </div>

            <!-- 私人订制 -->
            <div class="middle clearfix" th:if="${item.type eq 2}">
                <div class="middle-con clearfix">
                    <div class="left">
                        <img th:if="${item.orderDetail.photoGrapherUser.portrait ne null}" th:src="${#request.getAttribute('uploadServer') + item.orderDetail.photoGrapherUser.portrait}">
                        <img th:if="${item.orderDetail.photoGrapherUser.portrait eq null and item.orderDetail.photoGrapherUser.gender eq 0}" th:src="${#request.getAttribute('ctx') + '/static/front/img/gender/portrait-female.jpg'}"/>
                        <img th:if="${item.orderDetail.photoGrapherUser.portrait eq null and item.orderDetail.photoGrapherUser.gender eq 1}" th:src="${#request.getAttribute('ctx') + '/static/front/img/gender/portrait-male.jpg'}"/>
                    </div>
                    <div class="right">
                        <h4>导演：[[${item.orderDetail.photoGrapherUser.name ne null ?
                            item.orderDetail.photoGrapherUser.name :
                            item.orderDetail.photoGrapherUser.nickname}]]</h4>
                        <p>简介：[[${item.orderDetail.photoGrapherUser.description}]]</p>
                    </div>
                </div>
                <div class="middle-con clearfix">
                    <div class="left">
                        <img th:if="${item.orderDetail.scriptWriterUser.portrait ne null}" th:src="${#request.getAttribute('uploadServer') + item.orderDetail.scriptWriterUser.portrait}">
                        <img th:if="${item.orderDetail.scriptWriterUser.portrait eq null and item.orderDetail.scriptWriterUser.gender eq 0}" th:src="${#request.getAttribute('ctx') + '/static/front/img/gender/portrait-female.jpg'}"/>
                        <img th:if="${item.orderDetail.scriptWriterUser.portrait eq null and item.orderDetail.scriptWriterUser.gender eq 1}" th:src="${#request.getAttribute('ctx') + '/static/front/img/gender/portrait-male.jpg'}"/>
                    </div>
                    <div class="right">
                        <h4>编剧：[[${item.orderDetail.scriptWriterUser.name ne null ?
                            item.orderDetail.scriptWriterUser.name :
                            item.orderDetail.scriptWriterUser.nickname}]]</h4>
                        <p>简介：[[${item.orderDetail.scriptWriterUser.description}]]</p>
                    </div>
                </div>
                <div class="down clearfix">
                    <p cus:dict="order-status,${item.status}"></p>
                    <p>合计：<span th:text="${'￥' + #numbers.formatDecimal(item.totalPrice,1,2)}"></span>元</p>
                </div>
            </div>
            <div class="bottom">
                <a href="javascript:;" class="del-btn" th:attr="data-item-id=${item.id}">删除</a>
                <!--<a href="javascript:void(0)">再次购买</a>-->
                <a th:if="${item.status eq 1 and item.statusStep eq 0 and item.orderDetail.photographer ne null and item.orderDetail.scriptwriter ne null}"
                   th:href="@{'/evaluate/ready?targetType=3&target=' + ${item.id}}" target="_blank">去评价</a>
            </div>
        </div>
    </div>

</div>

<div th:replace="m/foot :: foot"></div>

</body>

<div th:replace="m/foot :: footer('')"></div>

<script th:inline="javascript">
    $(function () {
        $('.del-btn').click(function () {
            var _self = this;
            if (confirm('确定删除该订单?')) {
                var id = $(this).attr('data-item-id');
                $.ajax({
                    type: 'delete',
                    url: '/order/delete/' + id,
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content"));
                    },
                    success: function (result) {
                        if (result.status = Messages.HTTP_STATUS.SUCCESS) {
                            $(_self).parent().parent().remove();
                            alert(Messages.SUCCESS);
                            if ($('.myOrder-box').length == 0) {
                                $('.blank-box').show();
                            }
                        } else {
                            alert(Messages.DELETE_FAILED);
                        }
                    },
                    error: function(e) {
                        alert(Messages.ERROR);
                    }
                })
            }
        })
    })
</script>

</html>